import React, { PropTypes, Component } from 'react'
import classnames from 'classnames'

import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import {List, ListItem} from 'material-ui/List';


import { SketchPicker } from 'react-color';

const styles={
  slider:{
    marginTop:8,
    marginBottom:0
  },
  paddingInput:{
    width:120
  },
  subheader:{
    background:'#3899ec',
    cursor:'move'
  },
  boldIcon:{
    color:'#000',
    fontWeight:'bold'
  },
  fontFamily:{
    fontYahei:'Microsoft Yahei',
    fontSimSun:'SimSun',
    fontSimHei:'SimHei'
  },
  colorPicker:{
     position: 'absolute'
  }
}

class WidgetMenuFont extends Component {
 constructor(props, context) {
    super(props, context)
    this.state = {
     displayColorPicker:false
    };
  }


  handElementStyles(e,attribute,value){
    let {widget}=this.props
    let styles=widget.styles
    let componentId=widget.componentId
    let positionId=widget.positionId
    let newStyles=false
    switch (attribute){
      case 'fontFamily':{
          if(value!==''){
           newStyles= Object.assign({},styles,{fontFamily:value})
           break
           }
      }
      case 'fontSize':{
         const text = e.target.value.trim()
          if (e.which === 13&&parseInt(text)) {
               newStyles=Object.assign({}, widget.styles,{ fontSize: `${text}px` })
           }
          break
      }
      case 'lineHeight':{
         const text = e.target.value.trim()
          if (e.which === 13&&parseInt(text)) {
               newStyles=Object.assign({}, widget.styles,{ lineHeight: `${text}` })
           }
          break
      }
      case 'fontWeight':{
          let style= value==='bold'?'normal':'bold'
          newStyles=Object.assign({}, widget.styles,{ fontWeight: style })
          break
      }
      case 'textDecoration':{
          let style= value==='underline'?'none':'underline'
               newStyles=Object.assign({}, widget.styles,{ 'textDecoration':style  })
          break
      }
      case 'fontStyle':{
          let style= value==='italic'?'normal':'italic'
               newStyles=Object.assign({}, widget.styles,{ 'fontStyle': style })
          break
      }
      case 'color':{
          let style=value?`rgba(${value.rgb.r},${value.rgb.g},${value.rgb.b},${value.rgb.a})`:'transparent'
               newStyles=Object.assign({}, widget.styles,{ 'color':style })
          break
      }
      case 'textAlign':{
               newStyles=Object.assign({}, widget.styles,{ 'textAlign':value })
          break
      }

    }
     
    newStyles?this.props.widgetSetElementStyle(componentId,positionId,newStyles):null
  }
 
  handleColorPickClick = () => {
    this.setState({ displayColorPicker: !this.state.displayColorPicker })
  }

  render() {
    let { widget}=this.props
    return (
       <div className="menu-widget menu-widget-font">
         <List> 
          <ListItem primaryText="字体样式" 
                    style={{height:40,color:'rgb(0, 188, 212)'}}
                    initiallyOpen={true}
                     nestedItems={[
                     <div className="menu-widget-group" key="element-fontsize">
                        <div className="menu-widget-column header">
                         <div>
                             <span className="label" >字体大小</span>
                             <span>
                             <input type="text" className="ipt-fontsize"
                                    placeholder={widget.styles.fontSize||'12px'}
                                    onKeyDown={(e)=>{this.handElementStyles(e,'fontSize')}}  />
                            </span>
                         </div>
                         <div>
                             <span className="label" >行高</span>
                             <span>
                             <input type="text" className="ipt-fontsize"
                                    placeholder={widget.styles.lineHeight||'1.5'}
                                    onKeyDown={(e)=>{this.handElementStyles(e,'lineHeight')}}  />
                            </span>
                         </div>
                        </div>
                        
                     </div> ,
                     <div className="menu-widget-group" key="element-fontfamily">
                        <div className="menu-widget-column header">字体选择</div>
                        <div className="menu-widget-column ">
                            <SelectField value={widget.styles.fontFamily||'Microsoft Yahei'} 
                                         
                                         style={{width:'200px'}}
                                         onChange={(e,index,value)=>{this.handElementStyles(e,'fontFamily',value)}} >
                                  
                                   <MenuItem value="Microsoft Yahei" 
                                             primaryText="微软雅黑"
                                             style={{fontFamily:styles.fontFamily.fontYahei}} 
                                             />
                                  <MenuItem value="SimSun" 
                                            primaryText="宋体" 
                                             style={{fontFamily:styles.fontFamily.fontSimSun}} 
                                            />
                                  <MenuItem value="SimHei" 
                                            primaryText="黑体" 
                                             style={{fontFamily:styles.fontFamily.fontSimHei}} 
                                            />
                            </SelectField>
                        </div>
                        
                     </div> ,
                     <div className="menu-widget-group" key="element-fontstyle">
                        <div className="menu-widget-header">字体样式</div>
                        <div className="menu-widget-column font-styles">
                           <span className={classnames('font-weight',{
                                  'checked':widget.styles.fontWeight==='bold'
                                 })}
                                 onClick={(e)=>{this.handElementStyles(e,'fontWeight',widget.styles.fontWeight)}}

                           >B</span>
                         
                          <span className={classnames('font-under',{                                  
                                  'checked':widget.styles.textDecoration==='underline'
                                 })}
                                 onClick={(e)=>{this.handElementStyles(e,'textDecoration',widget.styles.textDecoration)}}>U</span>
                          <span 
                                className={classnames('font-italic',{                                  
                                  'checked':widget.styles.fontStyle==='italic'
                                 })}
                                 onClick={(e)=>{this.handElementStyles(e,'fontStyle',widget.styles.fontStyle)}}

                          >I</span>
                          <span className="font-color"
                                 onClick={ this.handleColorPickClick }
                                 >C</span>
                           { this.state.displayColorPicker ? <div style={ styles.colorPicker }>
                              
                              <SketchPicker  onChangeComplete={(color)=>{this.handElementStyles(this,'color',color)}}/>
                            </div> : null }
                      </div>
                     </div>,
                     <div className="menu-widget-group" key="element-align">
                        <div className="menu-widget-header">布局相关</div>
                         <div className="menu-widget-column font-align">
                             <span className={classnames(
                                  'fa fa-align-left'
                                 )}
                                 onClick={(e)=>{this.handElementStyles(e,'textAlign','left')}}> </span>
                                 <span className={
                                 classnames(
                                  'fa fa-align-center'
                                 )}
                                 onClick={(e)=>{this.handElementStyles(e,'textAlign','center')}}> </span>
                                 <span className={
                                 classnames(
                                  'fa fa-align-right'
                                 )}
                                 onClick={(e)=>{this.handElementStyles(e,'textAlign','right')}}> </span>
                          
                         </div>
                     </div>
                     ]}

           />
         
          </List>
                  
              </div>
        
    )
  }
}

WidgetMenuFont.propTypes = {
  widgetSetElementStyle:PropTypes.func.isRequired,
  handleWidgetMenuShow:PropTypes.func.isRequired
}

export default WidgetMenuFont
